<!-- 首页 -->
<template>
	<view class="container">
		<view class="c-form">
			
			<view class="form-info">
				<u-form :model="studentInfo" ref="form" :rules="rules" label-width="150rpx">
					<u-form-item label="机构名称" prop="organ_name" required>
						<view class="" style="width: 100%;z-index: 99999;">
							
							<uni-combox @input="searchOrg" :candidates="orgList" placeholder="输入培训机构名称搜索" v-model="studentInfo.organ_name" :emptyTips="emptyTips"></uni-combox>
						</view>
					</u-form-item>
					<u-form-item label="指导老师姓名" prop="train_teacher_name" required>
						<u-input placeholder="输入指导老师姓名" v-model="studentInfo.train_teacher_name" :disabled="isDisabled">
						</u-input>
					</u-form-item>
					<u-form-item label="指导老师联系电话" prop="train_teacher_mobile" required>
						<u-input placeholder="输入指导老师联系电话" v-model="studentInfo.train_teacher_mobile"
							:disabled="isDisabled"></u-input>
					</u-form-item>
					<u-form-item label="姓名" prop="name" required>
						<u-input placeholder="输入姓名" v-model="studentInfo.name" @blur="nameBlur" :disabled="isDisabled">
						</u-input>
					</u-form-item>
					<u-form-item label="拼音" required>
						<u-input placeholder="姓名拼音" v-model="studentInfo.pinyin" disabled></u-input>
					</u-form-item>
					<u-form-item label="民族" prop="nation" required>
						<u-input placeholder="输入民族" v-model="studentInfo.nation" :disabled="isDisabled"></u-input>
					</u-form-item>
					<u-form-item label="国籍" prop="national" required>
						<u-radio-group v-model="studentInfo.national" :value="studentInfo.national"
							:disabled="isDisabled">
							<u-radio label="中国" :name="1"></u-radio>
							<u-radio :customStyle="{marginLeft:'40rpx'}" label="港澳台" :name="2"></u-radio>
							<u-radio :customStyle="{marginLeft:'40rpx'}" label="国外" :name="3"></u-radio>
						</u-radio-group>
					</u-form-item>
					<u-form-item label="证件类型" prop="document_type" required>
						<u-radio-group v-model="studentInfo.document_type" :disabled="isDisabled">
							<u-radio label="身份证" :name="1"></u-radio>
							<u-radio :customStyle="{marginLeft:'40rpx'}" label="护照" :name="2"></u-radio>
						</u-radio-group>
					</u-form-item>
					<u-form-item label="证件号码" prop="document_nums" required>
						<u-input placeholder="输入证件号码" v-model="studentInfo.document_nums"
							:disabled="!studentInfo.document_type"></u-input>
					</u-form-item>
					<u-form-item label="性别" prop="sex" required>
						<u-radio-group v-model="studentInfo.sex" 
							:disabled="!studentInfo.document_type || studentInfo.document_type==1">
							<u-radio label="男" :name="1"></u-radio>
							<u-radio :customStyle="{marginLeft:'40rpx'}" label="女" :name="2"></u-radio>
						</u-radio-group>
					</u-form-item>
					<u-form-item label="出生日期" prop="birth" required>
						<view class=""
							@click="!studentInfo.document_type || studentInfo.document_type==1?false:dateShow = true">
							<u-input placeholder="选择出生日期" v-model="studentInfo.birth" disabled>
							</u-input>
						</view>
						<u-datetime-picker :show="isDisabled?false:dateShow" mode="date" @cancel="dateShow = false"
							@confirm="datePickerConfirm" :minDate="minStamp" :maxDate="maxStamp"></u-datetime-picker>
					</u-form-item>
					<u-form-item label="联系人姓名" prop="contact_name" required>
						<u-input placeholder="输入联系人" v-model="studentInfo.contact_name" :disabled="isDisabled">
						</u-input>
					</u-form-item>
					<u-form-item label="联系电话" prop="contact_mobile" required>
						<u-input placeholder="输入联系人电话" v-model="studentInfo.contact_mobile" disabled></u-input>
					</u-form-item>
					<u-form-item label="证件照(2寸)" prop="document_img" labelWidth="250rpx" labelPosition="top" required>
						<view class="" style="margin: 0 auto;">
							<u-upload width="200rpx" height="200rpx" :uploadIconColor="'#666'" :uploadIcon="'plus'"
								:fileList="filePath" :previewFullImage="true" @afterRead="afterRead" @delete="deletePic"
								name="1" :maxCount="1"></u-upload>
						</view>
					</u-form-item>
					
					<u-form-item label="邮寄地址" prop="contact_address" required>
						<u-textarea v-model="studentInfo.contact_address" placeholder="输入收货地址" autoHeight
							:disabled="isDisabled"></u-textarea>
					</u-form-item>
					<u-form-item>
						<!-- <u-button text="编辑" type="success" v-if="isDisabled" @click="isDisabled=false"></u-button> -->
						<!-- <u-button text="取消" type="success" v-else @click="navigateBack"></u-button> -->
						<u-button text="保存" type="primary" shape="circle" @click="saveForm"></u-button>
					</u-form-item>
				</u-form>
			</view>

		</view>
	</view>
</template>

<script>
	export default {
		name: "",
		data() {
			return {
				 // 机构选择提示
				emptyTips:"无匹配机构名称",
				// 搜索机构列表
				orgList:[],
				// 编辑状态
				editType: null,
				// 是否禁填
				isDisabled: true,
				// 照片
				filePath: [],
				// 日期选择器控件状态
				dateShow: false,
				// 用户身份
				status: this.$store.state.status,
				// 学生信息
				studentInfo: {
					comp_type: 1,
					name: null,
					pinyin: null,
					sex: null,
					birth: null,
					national: null,
					nation: null,
					organ_name: null,
					train_teacher_name: null,
					train_teacher_mobile: null,
					document_type: null,
					document_nums: null,
					document_img: null,
					contact_name: null,
					contact_mobile: null,
					contact_address: null
				},
				// 表单校验
				rules: {
					'name': {
						required: true,
						message: '请填写姓名',
						trigger: ['blur']
					},
					'document_nums': [{
							required: true,
							message: '请填写证件号码',
							trigger: ['blur']
						},
						{
							message: '身份证号码错误',
							trigger: ['blur'],
							validator: (rule, value, callback) => {
								if (uni.$u.test.idCard(value)) {
									let birth = value.slice(6, 14)
									this.studentInfo.birth =
										`${birth.slice(0,4)}-${birth.slice(4,6)}-${birth.slice(6,8)}`
									this.studentInfo.sex = value.slice(16, 17) % 2 == 0 ? 2 : 1
									this.$refs.form.validateField('sex')
									return true
								} else {
									if (this.studentInfo.document_type == 1) {
										return false
									} else {
										return
									}
								}
							},
						}
					],
					'sex': {
						type:'number',
						required: true,
						message: '请选择性别',
						trigger: ['change']
					},
					'birth': {
						required: true,
						message: '请选择生日',
						trigger: ['change']
					},
					'national': {
						type:'number',
						required: true,
						message: '请选择国籍',
						trigger: ['change']
					},
					'nation': {
						required: true,
						message: '请填写民族',
						trigger: ['blur']
					},
					'organ_name': {
						required: true,
						message: '请填写培训机构',
						trigger: ['blur']
					},
					'train_teacher_name': {
						required: true,
						message: '请填写指导老师姓名',
						trigger: ['blur']
					},
					'train_teacher_mobile': {
						required: true,
						message: '请填写指导老师联系电话',
						trigger: ['blur']
					},
					'document_type': {
						type:'number',
						required: true,
						message: '请选择证件类型',
						trigger: ['change']
					},
					'document_img': {
						required: true,
						message: '请上传证件照',
						trigger: ['blur']
					},
					'contact_name': {
						required: true,
						message: '请填写联系人姓名',
						trigger: ['blur']
					},
					'contact_mobile': {
						required: true,
						message: '请填写联系人电话',
						trigger: ['blur']
					},
					'contact_address': {
						required: true,
						message: '请填写邮寄地址',
						trigger: ['blur']
					},

				}
			}
		},
		onLoad(query) {
			this.editType = query.type
			if (this.status == 'student') {
				this.getStudentInfo()
			} else {
				this.isDisabled = false
				this.studentInfo.contact_mobile = uni.getStorageSync('userInfo').mobile
			}
			if (query.type == 'update') {
				this.isDisabled = false
			}

		},
		onReady() {
			//onReady 为uni-app支持的生命周期之一
			this.$refs.form.setRules(this.rules)
		},
		methods: {
			// 搜索机构名称
			searchOrg(val){
				this.emptyTips = "正在搜索中..."
				this.$http.getOrgList({organ_name:val}).then(res=>{
					this.emptyTips = "无匹配机构名称"
					this.orgList = res.data.map(item=>{
						return item.name
					})
				})
			},
			// 获取学生信息
			getStudentInfo() {
				this.$http.getStudentInfo().then(res => {
					this.studentInfo = res
					this.filePath = [{
						url: this.baseURL + res.document_img
					}]
				})
			},
			// 姓名填写完成
			nameBlur() {
				this.$http.parserPinyin({
					words: this.studentInfo.name
				}).then(res => {
					this.studentInfo.pinyin = res
				})
			},
			// 图片上传后
			afterRead(e) {
				// 微信小程序不支持多张图片上传
				uni.uploadFile({
					url: this.baseURL + '/api/common/upload',
					filePath: e.file.url,
					name: 'file',
					header: {
						"token": this.$store.state.token
					},
					success: (res) => {
						if (res.statusCode == 200) {
							let result = JSON.parse(res.data)
							let {
								data: {
									url,
									fullurl
								}
							} = result
							this.filePath.push({
								url: fullurl
							})
							this.studentInfo.document_img = url
						} else {
							let result = JSON.parse(res.data)
							uni.$u.toast(result.msg)
						}

					},
					fail: (err) => {
						uni.$u.toast(err)
					}
				})
			},
			// 删除图片
			deletePic(e) {
				if (this.isDisabled) return
				this.filePath = []
			},
			// 日期选择
			datePickerConfirm(obj) {
				this.dateShow = false
				this.studentInfo.birth = uni.$u.timeFormat(obj.value)
			},
			// 保存完善信息
			saveForm() {
				this.$refs.form.validate().then(res => {
					if (this.status == 'student') {
						this.$http.updateStudentInfo(this.studentInfo).then(res => {
							this.isDisabled = true
							uni.$u.toast("信息保存成功")
							if (this.editType == 'update') {
								uni.navigateBack()
							}
						}).catch(err => {
							uni.$u.toast(err.msg)
						})
					} else {
						this.$http.savePersonalInfo(this.studentInfo).then(res => {
							this.getUserInfo()
							uni.navigateBack()
						}).catch(err => {
							uni.$u.toast(err.msg)
						})
					}
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.container {
		.c-form {
			.form-btn {
				width: 100%;
				height: 100rpx;
				background-color: #ddd;
				position: fixed;
				top: 0;
				left: 0;
				z-index: 9999;
				display: flex;
				justify-content: flex-end;
				align-items: center;

				&>text {
					font-size: 32rpx;
					font-weight: bold;
					padding: 0 20rpx;
				}
			}

			.form-info {
				padding-top: 90rpx;
				background-color: #fff;
				padding: 0 30rpx;
				box-sizing: border-box;
			}
		}

	}
</style>
